<template>
  <div>
    <el-button
      size="small"
      icon="el-icon-printer"
      class="print-btn"
      @click="$print($refs.print, null)"
    >
      打印
    </el-button>
    <div
      class="handler-document"
      v-loading="loading"
      element-loading-background="rgba(255, 255, 255,1)"
      id="printContent"
      ref="print"
    >
      <div class="title">审批处理笺</div>
      <table class="table-wrapper" border="1px" cellspacing="0" cellpadding="0">
        <tr height="40">
          <td width="12%" align="center">材料清单</td>
          <td colspan="4" class="input-content">
            <ul>
              <li
                v-for="(item, index) in pager.file_data"
                :key="item.id"
                @click="previewFileAppendPath(item, 1, true)"
              >
                <span>{{ `${index + 1}、${item.filename}` }}</span>
              </li>
            </ul>
          </td>
        </tr>
        <tr
          class="situation"
          v-for="(val, key, index) in pointData"
          :key="index"
        >
          <td width="30" align="center">{{ key }}</td>
          <td colspan="4" class="content">
            <div class="inform" v-for="(p, i) in pointData[key]" :key="i">
              <div>{{ p.message }}</div>
              <div class="info">
                <div class="info-name">{{ p.userId }}</div>
                <div>{{ parseTime(p.time) }}</div>
              </div>
            </div>
          </td>
        </tr>
        <tr v-if="!queryData.isHand && showAdviceInput" class="situation">
          <td width="30" align="center">审批意见</td>
          <td colspan="4" class="content">
            <el-input type="textarea" :rows="4" v-model="comment"></el-input>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import { parseTime, filterObj, previewFileAppendPath } from "@/utils/index";
export default {
  name: "UploadApprovalSheet",
  props: {
    pager: {
      type: Object,
      default: () => {},
    },
    queryData: {
      type: Object,
      default: () => {},
    },
    pointData: {
      type: Array,
      default: () => [],
    },
    showAdviceInput: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    pointData: {
      handler(data) {
      },
      immediate: true
    },
  },
  data() {
    return {
      comment: "",
    };
  },
  methods: {
    parseTime,
    previewFileAppendPath,
  },
};
</script>

<style lang="scss">
.print-btn {
  position: absolute;
  right: 20px;
}
.handler-document {
  .title {
    text-align: center;
    font-size: 25px;
    color: red;
    padding: 15px 0px;
  }

  .table-wrapper {
    width: 100%;
    margin: 0 auto;
    max-width: 800px;
    font-size: 14px;
    font-weight: bold;
    color: red;
    border-collapse: collapse;

    td {
      border: 1px solid;
      span {
        display: inline-block;
        margin-left: 6px;
        color: #000;
        font-weight: normal;
      }
    }

    .situation {
      min-height: 80px;
      height: 80px;

      .content {
        padding: 10px;

        .inform {
          height: 70px;
          padding: 10px 10px 10px 0;
          /* margin: 0 10px; */
          border-bottom: 1px solid #ccc;
          color: #000;
          font-weight: normal;

          &-comment {
            width: 60%;
          }

          .info {
            float: right;
            font-size: 12px;
            text-align: center;
            color: #797979;

            &-name {
              padding: 6px;
            }
          }

          &:last-child {
            border: none;
          }
        }
      }
    }
    tr {
      .input-content {
        padding-left: 10px;
        ul {
          list-style: none;
          padding: 0;
          > li {
            padding: 4px 0;
            cursor: pointer;
            & {
              span {
                color: #409eff !important;
              }
            }
          }
        }
      }
    }
    td {
      span {
        /* margin-left: 10px; */
        color: #000;
        font-weight: normal;
      }
    }
    .el-input__inner {
      background-color: transparent;
      border: 0;
    }
  }
}
</style>